<template>
  <template v-for="tool in tools">
    <el-button size="small" :data-type="tool.type" :icon="tool.icon" text @click="emit('click', tool.type)">
      {{ tool.title }}
    </el-button>
  </template>
</template>

<script setup lang="ts">
import type { MerakXTableToolbarType, MerakXTableToolbar } from "./index";

import { getCurrentInstance, computed } from "vue";

import { ElButton } from "element-plus";

const props = defineProps<{
  toolbar: Array<MerakXTableToolbarType | MerakXTableToolbar>;
}>();

const emit = defineEmits<{
  click: [type: string];
}>();

const instance = getCurrentInstance();

const tools = computed(() =>
  props.toolbar.map(tool => {
    if (typeof tool === "string") {
      let title: string = "";
      switch (tool) {
        case "refresh":
          title = instance?.proxy?.$t("merak.refresh") as string;
          break;
        case "setting":
          title = instance?.proxy?.$t("merak.column_settings") as string;
          break;
        case "export":
          title = instance?.proxy?.$t("merak.export_data") as string;
          break;
        default:
          break;
      }
      return { type: tool, title };
    }
    return tool;
  })
);
</script>
